<template>
  <div>
    <div class="employee-choose">
      <el-form :inline="true" size="mini" :model="search">
        <el-form-item :label="$t('notice.name')">
          <el-input
            v-model="search.displayName"
            :placeholder="$t('notice.inputName')"
            clearable
            @blur="trim('displayName')"
            @mouseout.native="blurRule($event)"
          />
        </el-form-item>

        <el-form-item :label="$t('notice.tel')">
          <el-input
            v-model="search.phoneNum"
            :placeholder="$t('notice.inputPhone')"
            clearable
            @blur="trim('phoneNum')"
            @mouseout.native="blurRule($event)"
          />
        </el-form-item>

        <el-form-item style="float: right">
          <el-button type="primary" @click="load">{{
            $t('common.search')
          }}</el-button>
        </el-form-item>
      </el-form>
      <el-transfer
        v-model.trim="selected"
        :data="employees"
        :props="roleProp"
        :titles="[$t('common.select'), $t('common.selected')]"
      />
    </div>

    <div class="choose-buttons">
      <el-button @click="cancel">{{ $t('common.cancel') }}</el-button>
      <el-button type="primary" @click="confirm">{{
        $t('common.ok')
      }}</el-button>
    </div>
  </div>
</template>

<script>
import doodApi from '@/api/ddio';
import { trim } from '@/utils/';

export default {
  name: 'EmployeeChoose',
  props: {
    defaultSelected: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      employees: [],
      selected: [],
      roleProp: { key: 'sourceId', label: 'displayName' },
      dataMap: new Map(),
      search: {
        displayName: null,
        phoneNum: null,
        page: 1,
        size: 100,
      },
    };
  },
  watch: {
    defaultSelected() {
      this.getSelectedByUserIds();
    },
  },
  created() {
    // 初始化数据
    this.load();
    this.getSelectedByUserIds();
  },
  methods: {
    /**
     * 获取成员列表数据
     */
    load() {
      doodApi.getDoodUser(this.search).then(result => {
        this.fliterData(result.data);
      });
    },
    /**
     * 通过userIds获取已选择成员
     */
    getSelectedByUserIds() {
      if (this.defaultSelected && this.defaultSelected.length > 0) {
        this.selected = this.defaultSelected;
        // const userIds = this.selected.join(',');
      } else {
        this.selected = [];
      }
    },
    /**
     * 确定选择人员
     */
    confirm() {
      const userIds = this.selected;
      const users = [];
      userIds.forEach(item => {
        const objItem = {
          sourceId: item,
          name: this.dataMap.get(item),
        };
        users.push(objItem);
      });
      this.$emit('confirm', users);
      this.search.name = null;
      this.search.phoneNum = null;
    },
    /**
     * 取消选择人员
     */
    cancel() {
      this.$emit('cancel');
      this.search.displayName = null;
      this.search.phoneNum = null;
    },
    /**
     * 更新数据
     * @param {JSON} data 新数据
     */
    fliterData(data) {
      this.employees = [];
      this.dataMap.clear();
      data.forEach(item => {
        if (!this.dataMap.get(item.sourceId)) {
          this.dataMap.set(item.sourceId, item.displayName);
          this.employees.unshift(item);
        } else {
          let e2Index = -1;
          for (const index in this.employees) {
            if (item.sourceId === this.employees[index].sourceId) {
              e2Index = index;
              break;
            }
          }
          if (e2Index !== -1) {
            this.employees.splice(e2Index, 1);
            this.employees.unshift(item);
          }
        }
      });
    },
    /**
     * 去除两端空格处理
     * @param {String} name 输入框名称
     */
    trim(name) {
      this.search[name] = trim(this.search[name]);
    },
    /**
     * 失去焦点
     * @param {DOMEvent} event 当前输入框
     */
    blurRule(event) {
      // 输入框失去焦点操作
      event.target.blur();
    },
  },
};
</script>

<style lang="scss" scoped>
.employee-choose {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
}

.choose-buttons {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  .el-button {
    margin: 0 10px;
  }
}
</style>
